<template>
  <div class="limit_setting">
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>权限配置
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(0)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe662;</span>刷新
          </el-button>
        </div>
      </div>
    </div>
    <div class="body_container">
      <div class="body_left">
        <button @click="addChange" :class="isAdd?'cancel':''">{{isAdd?'取消添加':'添加子节点'}}</button>
        <button @click="del">删除选中节点</button>
        <el-input
          placeholder="输入关键字进行筛选"
          v-model="filterText"
          style="width:216px;margin:10px auto;"
        ></el-input>
        <!--default-expand-all-->
        <el-tree
          class="filter-tree"
          :data="data"
          :props="defaultProps"
          :filter-node-method="filterNode"
          :highlight-current="true"
          :check-on-click-node="true"
          ref="tree2"
          @node-click="setCurrent"
        ></el-tree>
      </div>
      <div class="body_right">
        <div class="right_header">
          <p>{{isAdd?'添加子节点':'权限设置'}}</p>
          <button @click="add">{{isAdd?'确认添加':'保存设置'}}</button>
        </div>
        <div class="right_body">
          <el-form
            ref="form"
            :model="form"
            label-width="80px"
            :inline="true"
            style="text-align:left;"
          >
            <el-form-item label="父级节点：" label-width="100px">
              <el-input v-model="form.parent" :disabled="true" style="width:240px;"></el-input>
            </el-form-item>
            <el-form-item label="父级代码：" label-width="100px">
              <el-input v-model="form.authParent" :disabled="true" style="width:240px;"></el-input>
            </el-form-item>
            <el-form-item label="按钮名称：" label-width="100px">
              <el-input v-model="form.authName" placeholder="请输入名称" style="width:240px;" clearable></el-input>
            </el-form-item>
            <el-form-item label="按钮代码：" label-width="100px">
              <el-input v-model="form.authId" placeholder="请输入代码" style="width:240px;" clearable></el-input>
            </el-form-item>
            <el-form-item v-if="isAdd" label="按钮路径：" label-width="100px">
              <el-input v-model="form.authPath" placeholder="请输入路径" style="width:240px;" clearable></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "orgSetting",
  data() {
    return {
      // 搜索框的值
      filterText: "",
      defaultProps: {
        children: "partList",
        label: "authName"
      },
      // 添加/编辑
      isAdd: false,
      // 当前选中项的节点和数据
      currentNode: {},
      currentData: {},
      // 树状图的数据
     data: [],
      // 表单的数据
      form: {
        parent: "", //父节点名称
        authParent:"",//权限父级id  parentCode
        authName: "", //按钮名称 label
        authId: "", //按钮id  code
        partList: [],
        authPath:"",//按钮路径
      }
    };
  },
  mounted() {
      this.dataInit();
  },
  methods: {
    //权限列表
    dataInit(){
      let that = this;
      let suCb = function(res){
        console.log(res.data.data.parentList);
        that.data = res.data.data.parentList;
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
      }
      let palyParam = {
        url: "/api/web/sysAuthority/getAuthorityList",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    // 点击添加子部门按钮 切换isAdd的状态 把当前选中项的data和node传入setCurrent重置
    addChange() {
      this.isAdd = !this.isAdd;
      if(this.isAdd == false && JSON.stringify(this.currentData)=='{}'){
        console.log(1)
        return false
      }else{
        console.log(this.currentData)
        this.setCurrent(this.currentData, this.currentNode);
      }
    },
    //  获取当前选中项的data和node 并赋值给form中的子项，然后将form.children重置为空数组
    setCurrent(data, node) {
      console.log(data)
      console.log(node)
      this.currentData = data;
      this.currentNode = node;
      // 如果是添加 则父节点为当前选中的节点 其他为空 让用户输入
      if (this.isAdd) {
        this.form.parent = data.authName;
        this.form.authName = "";
        this.form.authId = "";
        this.form.authParent= data.authId;
        this.form.partList = [];
      } else {
        // 如果是编辑 则父节点为当前节点的parent.data.label 其他信息自动填充 然后children为空数组
        this.form.parent = node.parent.data.authName==undefined?"无父节点":node.parent.data.authName;
        this.form.authName = data.authName;
        this.form.authId = data.authId;
        this.form.authParent= node.parent.data.authId;
        this.form.partList = [];
      }
      console.log( this.form)
    },
    // 搜索框 过滤函数
    filterNode(value, data) {
      if (!value) return true;
      return data.authName.indexOf(value) !== -1;
    },
    add() {
      // 先判断form.label不能为空
      if (this.form.authName == ""||this.form.authId == "") {
        alert("名称或代码不能为空");
      } else {
        // 如果是添加 就利用JSON序列化反序列化深拷贝form并赋值给newChild 然后push进当前数据中的children数组
        if (this.isAdd) {
            if(this.form.authParent=="" || this.form.authParent==undefined){
              this.form.authParent='0';
              this.addChildNode(this.form)
            }else{
              let newChild = JSON.parse(JSON.stringify(this.form));
              console.log(this.currentData)
              this.currentData.partList.push(newChild);
              this.addChildNode(this.form)
            }
          this.form = {
            parent: "", //父节点名称
            authParent:"",//权限父级id  parentCode
            authName: "", //按钮名称 label
            authId: "", //按钮id  code
            partList: [],
            authPath:"",//按钮路径
          };
          this.isAdd = false
        } else {
          // 如果是编辑 则将改变的数据赋值给当前选中项的data 然后清空form 初始化父节点的显示框
          this.currentData.authName = this.form.authName;
          this.currentData.authId = this.form.authId;
          this.edit(this.form)
        }
      }
    },
    del() {
      // 找到父节点 没有父节点则为当前节点 然后找寻对应下标 用splice从当前数组中删除
      console.log(this.currentNode)
      const parent = this.currentNode.parent;
      console.log(parent);
      const children = parent.data.partList || parent.data;
      const index = children.findIndex(d => d.authName === this.currentData.authName);
      children.splice(index, 1);
      console.log(this.form);
      this.deletChildNode(this.form);
      this.form = {
        parent: "",
        authName: "",
        authId: "",
        authParent:"",
        partList: []
      };
      this.isAdd = false;
    },
//    添加子节点函数
    addChildNode(val){
      let that = this;
      let suCb = function(res){
        that.$message({
          message: '添加成功',
          type: 'success'
        });
        that.dataInit();
      }
      let erCb = function(res){
        that.dataInit();
        that.$alert(res.data.message, '提示', {
          confirmButtonText: '确定',
          callback: action => {
            that.isAdd = false
          }
        });
      }
      let postData = {
        authId:val.authId,
        authName:val.authName,
        authParent:val.authParent,
        authPath:val.authPath
      }
      let palyParam = {
        url: "/api/web/sysAuthority/insertInfo",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    //删除子节点
    deletChildNode(val){
      let that = this;
      let suCb = function(res){
        that.$message({
          message: '删除成功',
          type: 'success'
        });
        that.dataInit();
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
        authId:val.authId
      }
      let palyParam = {
        url: "/api/web/sysAuthority/delectInfo",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    //编辑子节点
    edit(val){
      let that = this;
      let suCb = function(res){
        that.$message({
          message: '修改成功',
          type: 'success'
        });
      }
      let erCb = function(res){
        that.$alert(res.data.message, '提示', {
          confirmButtonText: '确定',
          callback: action => {
            that.isAdd = false
          }
        });
      }
      let postData = {
        authId:val.authId,
        authName:val.authName,
      }
      let palyParam = {
        url: "/api/web/sysAuthority/updateInfo",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    }
  },
  watch: {
    // 侦听 当前搜索框的值
    filterText(val) {
      this.$refs.tree2.filter(val);
    }
  }
};
</script>

<style scoped>
.body_container {
  width: 1100px;
  margin: 30px auto;
  display: flex;
  justify-content: space-between;
}

.body_left {
  width: 300px;
  border: 1px solid rgba(228, 228, 228, 1);
  background-color: rgba(255, 255, 255, 1);
  min-height: 800px;
  padding: 10px;
  box-sizing: border-box;
}

.body_right {
  width: 780px;
  min-height: 800px;
  border: 1px solid rgba(228, 228, 228, 1);
}

.body_right .right_header {
  border-bottom: 1px solid rgba(228, 228, 228, 1);
  height: 45px;
  line-height: 45px;
  display: flex;
  justify-content: space-between;
  background-color: #f3f3f3;
}

.body_right .right_header p {
  font-size: 14px;
  margin-left: 15px;
  color: #666;
}

.body_right .right_body {
  padding: 20px 30px;
}

.body_container button {
  height: 35px;
  line-height: 35px;
  border: 1px solid #eee;
  border-radius: 2px;
  background-color: #fff;
  font-size: 14px;
  color: #666;
  width: 100px;
  margin: 5px;
}

.body_container button:hover,
.body_container button.cancel {
  color: #fff;
  background-color: #1abc9c;
}
</style>

